<!--区域机构图-->
<template>
    <div class="area-num">
        <div class="chart" id="chart_content"></div>
    </div>
</template>

<script>
    export default {
        name: 'areaNum',
        data() {
            return {
                timer : '',
            }
        },
        mounted() {
            this.getEchartContent()
        },
        methods: {
            getEchartContent() {
                let myChart = this.$echarts.init(document.getElementById('chart_content'));
                let color = ['#ffffff', '#36fff6', '#ffe93a', '#67f95f'];
                let oneArr = [{
                    name: '聚医云系统',
                    type: 10,
                    symbolSize: 100,// 中间图形大小
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 1,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: '#ffe93a' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#36fff6' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                }];
                let erArr = [{
                    name: '黔南布依族苗族自治州\n\n服务机构数 : 39 家',
                    text: '一级以下医疗机构： 0 家',
                    text1: '一级医疗机构： 23 家',
                    text2: '二级及二级以上医疗机构： 16 家',
                    type: 1
                }, {
                    name: '黔东南苗族侗族自治州\n\n服务机构数 : 114 家',
                    text: '一级以下医疗机构： 14 家',
                    text1: '一级医疗机构： 83 家',
                    text2: '二级及二级以上医疗机构： 17 家',
                    type: 1
                }, {
                    name: '铜仁市 ：服务机构数 : 48家',
                    text: '一级以下医疗机构： 11 家',
                    text1: '一级医疗机构： 27 家',
                    text2: '二级及二级以上医疗机构： 10 家',
                    type: 1
                }, {
                    name: '毕节市\n\n服务机构数 : 28 家',
                    text: '一级以下医疗机构： 0 家',
                    text1: '一级医疗机构： 14 家',
                    text2: '二级及二级以上医疗机构： 14 家',
                    type: 1
                }, {
                    name: '遵义市\n\n服务机构数 : 29 家',
                    text: '一级以下医疗机构： 0 家',
                    text1: '一级医疗机构： 17 家',
                    text2: '二级及二级以上医疗机构： 12 家',
                    type: 1
                }, {
                    name: '安顺市\n\n服务机构数 : 7 家',
                    text: '一级以下医疗机构： 5 家',
                    text1: '一级医疗机构： 0 家',
                    text2: '二级及二级以上医疗机构： 2 家',
                    type: 1
                }, {
                    name: '贵阳市 ：服务机构数 : 1677家',
                    text: '一级以下医疗机构： 1672 家',
                    text1: '一级医疗机构： 3 家',
                    text2: '二级及二级以上医疗机构： 2 家',
                    type: 2
                }, ];
                let allArr = [...oneArr, ...erArr],
                    dataArr = [];
                // 点
                allArr.forEach((el, ind) => {
                    if (el.type > 0) {
                        el.symbolSize = 30;
                        el.symbol= 'path://M527.57504 71.91552 24.38144 417.75616 24.38144 512l94.24384 0 0 440.0896 786.75456 0L905.37984 512l94.23872 0L999.61856 417.75616 527.57504 71.91552zM752.3072 660.17792l-174.67392 0 0 174.67392L446.05952 834.85184l0-174.67392L272.52224 660.17792l0-130.432 174.67392 0L447.19616 355.07712l130.43712 0 0 174.67392 174.67392 0L752.3072 660.17792z';
                        el.itemStyle = {
                            color: color[el.type],
                        };
                    }
                    if(el.type >= 10){
                        el.symbolSize = 80;
                        el.symbol = 'path://M915.817 366.973c-27.314-28.229-65.416-44.425-104.557-44.425-6.466 0-12.835 0.426-19.207 1.277-33.276-41.303-83.205-65.479-137.045-65.479-48.004 0-92.475 20.47-124.333 51.885 0 0-0.061-0.221 0 0-28.038-12.08-58.633-18.546-90.269-18.546-108.375 0-200 74.925-222.802 178.268-75.509 5.598-135.088 65.384-135.088 138.511 0 77.527 65.697 139.977 146.505 139.977h422.298c1.86 0 46.396 0.347 91.057-22.047 34.665-17.41 74.688-50.591 88.786-113.183 51.57-7.034 120.645-42.974 124.052-145.229 1.259-37.533-12.745-73.442-39.397-101.009z m-197.316 307.9c-32.772 16.969-66.963 17.41-67.247 17.426l-422.298 0.599c-49.486-0.016-89.7-37.613-89.7-83.835 0-45.482 40.34-82.447 89.923-82.447 3.249 0 6.466 0.126 9.683 0.473 0 0 16.401 1.009 24.033-6.087 5.962-5.535 7.035-19.177 7.035-19.177 9.208-87.32 82.446-153.177 170.476-153.177 54.819 0 105.032 24.334 137.265 67.844 0.759 0.946 1.45 1.956 2.083 2.917 1.482 2.066 2.933 4.132 4.321 6.261 0.788 1.214 1.608 2.46 2.429 3.674 6.97 10.992 20.564 15.786 32.927 11.638 11.353-3.88 22.489-5.252 32.549-5.567 70.431 0.236 127.643 57.593 127.643 128.087 0.002 53.605-20.026 90.05-61.122 111.371z m180.127-208.767c-2.019 61.252-36.903 81.769-62.451 88.566-4.635-97.855-85.631-176.092-184.575-176.092-10.19 0-20.283 0.773-30.185 2.429-11.766-15.329-25.202-28.907-39.994-40.593 0.065-0.032 0.158-0.063 0.252-0.11-0.094-0.031-0.094-0.079-0.155-0.095 20.373-15.817 45.859-25.169 73.487-25.169 41.066 0 78.822 20.675 100.869 55.354 6.75 10.535 19.556 15.455 31.571 12.064 7.697-2.192 15.71-3.296 23.813-3.296 23.878 0 47.187 9.92 63.872 27.188 15.897 16.448 24.285 37.644 23.496 59.754z';
                        el.itemStyle = {
                            color: '#36FFF6',
                        };
                    }
                    el.label = {
                        normal: {
                            show: true,
                            position: "bottom",
                            distance: 20,
                            color: color[el.type],
                        },
                    };

                });

                // 圆形分区
                function group(arr, r) {
                    const newArray = [];
                    const {
                        length: arLen
                    } = arr;
                    arr.forEach((e, ind) => {
                        // 按角度均匀分布
                        const ang = 90 - (360 / arLen).toFixed(2) * (ind + 1);
                        const x = (Math.cos(ang * Math.PI / 180)).toFixed(2) * r;
                        const y = (Math.sin(ang * Math.PI / 180)).toFixed(2) * r;
                        const x1 = (Math.cos(ang * Math.PI / 180)).toFixed(2) * (r - 5);
                        const y1 = (Math.sin(ang * Math.PI / 180)).toFixed(2) * (r - 5);
                        const x0 = (Math.cos(ang * Math.PI / 180)).toFixed(2) * (r - 30);
                        const y0 = (Math.sin(ang * Math.PI / 180)).toFixed(2) * (r - 30);
                        e.value = [x.toFixed(2), y.toFixed(2)]
                        e.twoPoint = [[x1.toFixed(2), y1.toFixed(2)], [x0.toFixed(2), y0.toFixed(2)]];
                        newArray.push(e);
                    });
                    return newArray;
                }

                // 线配置
                function linesConfig(arr) {
                    const [dataArr, targetCoord] = [
                        [],
                        [0, 0]
                    ];
                    arr.forEach((el) => {
                        function getFormatItem(start, end) {
                            let item = [
                                {coord: el.twoPoint[start]},// 起点
                                {
                                    coord: el.twoPoint[end],
                                    lineStyle: {
                                        color: color[el.type],
                                        curveness: el.type === 3 ? 0.1 : 0,
                                    },
                                    effect: {
                                        color: color[el.type]
                                    }
                                }, // 终点
                            ]
                            return item
                        }
                        switch (el.type) {
                            case 0:
                                break;
                            case 1:
                                dataArr.push(getFormatItem(0, 1));
                                break;
                            case 2:
                                dataArr.push(getFormatItem(1, 0));
                                break;
                            case 3:
                                dataArr.push(getFormatItem(0, 1));
                                dataArr.push(getFormatItem(1, 0));
                                break;
                        }
                    });
                    return dataArr;
                }

                // 点分布
                oneArr = group(oneArr, 0);
                erArr = group(erArr, 40);

                allArr = [...oneArr, ...erArr];
                // 线坐标和配置
                dataArr = linesConfig(allArr);

                function generateData(totalNum, bigvalue, smallvalue, color) {
                    let dataArr = [];
                    for (var i = 0; i < totalNum; i++) {
                        if (i % 2 === 0) {
                            dataArr.push({
                                name: (i + 1).toString(),
                                value: bigvalue,
                                itemStyle: {
                                    normal: {
                                        color: color,
                                        borderWidth: 0,
                                    }
                                }
                            });
                        } else {
                            dataArr.push({
                                name: (i + 1).toString(),
                                value: smallvalue,
                                itemStyle: {
                                    normal: {
                                        color: "rgba(0,0,0,0)",
                                        borderWidth: 0,
                                    }
                                }
                            });
                        }

                    }
                    return dataArr;
                }

                let dolitData = generateData(20, 25, 20, 'rgb(126,190,255)');
                let threeData = generateData(6, 20, 10, '#2dc0c9');

                function getOption(startAngle, radius) {
                    let option = {
                        // title: {
                        //     text: '开启线图拖尾效果出现一卡一卡\n因为圆使用的定时动画',
                        //     left: 'center',
                        //     textStyle: {
                        //         color: '#fff'
                        //     }
                        // },
                        tooltip: {
                            show: true,
                            formatter: function({ data }) {
                                let str = '';
                                if(data){
                                    str = `${data.name}<br/> ${data.text || ''} <br/>${data.text1 || ''} <br/> ${data.text2 || ''}`;
                                }
                                return str;
                            },
                        },
                        xAxis: {
                            show: false,
                            type: "value",
                            max: 50,
                            min: -51,
                        },

                        grid: {
                            top: 0,
                            bottom: 10,
                            left: 10,
                            right: 0,
                        },
                        yAxis: {
                            show: false,
                            type: "value",
                            max: 50,
                            min: -50,
                        },
                        series: [{
                            name: "节点",
                            type: "graph",
                            silent: false,
                            hoverAnimation: false, // 鼠标悬浮高亮
                            cursor: 'default',
                            coordinateSystem: "cartesian2d",
                            z: 3,
                            itemStyle: {
                                normal: {
                                    shadowColor: "none",
                                },
                            },
                            emphasis: {
                                scale: false
                            },
                            data: allArr,
                        },
                            {
                                name: "线图",
                                type: "lines",
                                hoverAnimation: false,
                                silent: false,
                                cursor: 'default',
                                coordinateSystem: "cartesian2d",
                                polyline: false, // 多线段
                                z: 1,
                                lineStyle: {
                                    width: 2,
                                    type: 'dashed',
                                    curveness: 0,
                                },
                                effect: {
                                    show: true,
                                    period: 8, //箭头指向速度，值越小速度越快
                                    trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
                                    symbol: 'arrow', //箭头图标
                                    symbolSize: 6
                                },
                                emphasis: {
                                    lineStyle: {
                                        type: 'dashed',
                                    }
                                },
                                data: dataArr,
                            },
                            {
                                type: 'pie',
                                name: '旋转圆',
                                zlevel: 20,
                                silent: true,
                                radius: ['50%', '49%'],
                                hoverAnimation: false,
                                startAngle: startAngle,
                                data: threeData,
                                label: {
                                    normal: {
                                        show: false
                                    },
                                },
                                labelLine: {
                                    normal: {
                                        show: false
                                    }
                                },
                            },
                            {
                                name: '缩放圆',
                                type: 'pie',
                                zlevel: 4,
                                silent: true,
                                radius: [(radius + 1) + '%', radius + '%'],
                                label: {
                                    normal: {
                                        show: false
                                    },
                                },
                                labelLine: {
                                    normal: {
                                        show: false
                                    }
                                },
                                data: dolitData
                            },
                        ],
                    };
                    return option;
                }

                let startAngle = 50; // 初始旋转角度
                let [minradius, radius, maxradius] = [24, 24, 28] // 初始缩放尺寸
                let isBig = true // 缩放动画 标识

                function draw() {
                    startAngle = startAngle - 5
                    if (isBig) {
                        radius = radius + 0.5
                        if (radius > maxradius) {
                            isBig = false
                        }
                    } else {
                        radius = radius - 0.5
                        if (radius < minradius) {
                            isBig = true
                        }
                    }
                    let option = getOption(startAngle, radius)
                    myChart.setOption(option, true);
                }

                this.timer = setInterval(draw, 200);
                window.addEventListener('resize', () => {
                    myChart.resize()
                })
            }
        },

        beforeDestroy(){
            clearInterval(this.timer);
        }


    }
</script>

<style lang="less" scoped>
    .area-num {
        .chart {
            height: 7.95rem;
            width: 9rem;
            margin-top: -0.5rem;
            margin-bottom: -0.05rem;
        }
    }
</style>
